<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>data</title>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" href="images/jqgrid/jquery-ui-1.7.1.custom.css">
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="javascript/jquery.ui.all.js"></script>
<script type="text/javascript" src="javascript/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="javascript/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
var gridimgpath = 'images/jqgrid/images';
jQuery(document).ready(function(){
jQuery("#list4").jqGrid({ datatype: "local", height: 250, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:60, sorttype:"int"}, {name:'invdate',index:'invdate', width:90, sorttype:"date"}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right",sorttype:"float"}, {name:'tax',index:'tax', width:80, align:"right",sorttype:"float"}, {name:'total',index:'total', width:80,align:"right",sorttype:"float"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:10, pager: jQuery('#pager9'), sortname: 'id', imgpath: gridimgpath, multiselect: true, caption: "Manipulating Array Data" }).navGrid('#pager9',{edit:true,add:true,del:true});
var mydata = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"}, {id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"}, {id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"10",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"11",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}, {id:"12",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"} ]; 
for(var i=0;i<=mydata.length;i++)
jQuery("#list4").addRowData(i+1,mydata[i]);

$('#list1').jqGrid({ url:'table/do?type=read&table=users', datatype: "json", colNames:["id", "username", "password", "nickname", "sex", "age", "telphone", "adress", "description"], colModel:[ {name:'id',index:'id', width:55}, {name:'username',index:'username', width:90}, {name:'password',index:'password', width:100}, {name:'nickname',index:'nickname', width:80, align:"right"}, {name:'sex',index:'sex', width:80, align:"right"}, {name:'age',index:'age', width:80,align:"right"}, {name:'telphone',index:'telphone', width:150, sortable:false}, {name:'address',index:'address', width:150, sortable:false}, {name:'description',index:'description', width:150, sortable:false} ], rowNum:10, rowList:[10,20,30], imgpath: gridimgpath, pager: jQuery('#pager1'), sortname: 'id', viewrecords: true, sortorder: "desc", caption:"JSON Example" });
});
</script>
</head>
<body style="font-size: 12px;">
<table id="list4" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager9" class="scroll" style="text-align:center;"></div>
 
<table id="list1" class="scroll" cellpadding="0" cellspacing="0" style="width:800px;"></table>
<div id="pager1" class="scroll" style="text-align:center;"></div>
</body>
</html>